modalDialog: fade in buttons when first showing them

Right now, if buttons get set on a dialog after it is mapped,
they just pop in instantly.

We shouldn't have any harsh transitions like that, though.

This commit changes the buttons to quickly fade in, instead.

https://bugzilla.gnome.org/show_bug.cgi?id=657082

diff --git a/js/ui/modalDialog.js b/js/ui/modalDialog.js
index 36743604eeacf5c880c1daa0b7c740056f6d2186..effc5bed6d7aab8626568076d0132a34a919d0c6 100644 (file)
--- a/js/ui/modalDialog.js
+++ b/js/ui/modalDialog.js
@@ -18,6 +18,7 @@ const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
 
 const OPEN_AND_CLOSE_TIME = 0.1;
+const FADE_IN_BUTTONS_TIME = 0.33;
 const FADE_OUT_DIALOG_TIME = 1.0;
 
 const State = {
@@ -98,6 +99,8 @@ ModalDialog.prototype = {
     },
 
     setButtons: function(buttons) {
+        let hadChildren = this._buttonLayout.get_children() > 0;
+
         this._buttonLayout.destroy_children();
         this._actionKeys = {};
 
@@ -137,6 +140,22 @@ ModalDialog.prototype = {
                 this._actionKeys[key] = action;
             i++;
         }
+
+        // Fade in buttons if there weren't any before
+        if (!hadChildren && i > 0) {
+            this._buttonLayout.opacity = 0;
+            Tweener.addTween(this._buttonLayout,
+                             { opacity: 255,
+                               time: FADE_IN_BUTTONS_TIME,
+                               transition: 'easeOutQuad',
+                               onComplete: Lang.bind(this, function() {
+                                   this.emit('buttons-set');
+                               })
+                             });
+        } else {
+            this.emit('buttons-set');
+        }
+
     },
 
     _onKeyPressEvent: function(object, keyPressEvent) {